<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.users.js"></script>

<?php pr($_SESSION);?>
  <center><h3>My Registeration Page</h3></center>
    <hr>
<form name="users" id="usersId" method="post" action="saveuser.php" enctype="multipart/form-data">

    <table border="0" width="100%" align="center"
    cellspacing="0">

      <thead>
        <tr>
          <th colspan="2">Please fill the details below...</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td align="right" width="40%">Name :</td>
          <td><input type="text" name="name" value="rasmus lerdorf"/></td>
        </tr>

        <tr>
          <td align="right">Email :</td>
          <td><input type="text" name="email" value="zeev@andi.com"/></td>
        </tr>

        <tr>
          <td align="right">Password :</td>
          <td><input type="password" name="password" value="1q1q1q"/></td>
        </tr>

        <tr>
          <td align="right">Confirm Password :</td>
          <td><input type="password" value="1q1q1q" /></td>
        </tr>

        <tr>
          <td align="right">Gender :</td>
          <td>
          <label class="radio inline" style="margin-left :15px;"><input name="gender" type="radio" value="0" />Male</label>
          <label class="radio inline" style="margin-left :15px;"><input  name="gender" type="radio"  value="1" checked />Female</label></td>
        </tr>

        <tr>
          <td align="right">Phone :</td>
          <td><input type="text" name="phone" value="1234567890">
        </tr>

        <tr>
          <td align="right">Date Of birth :</td>
          <td><input type="text" name="dob" value="17-12-1984" /></td>
        </tr>

        <tr>
          <td align="right">Address :</td>
          <td><textarea name="address">H-231 Sec 22 Noida</textarea></td>
        </tr>

        <tr>
          <td align="right">Country :</td>
          <td>
<div id="countryDiv">
  <select name="country">
    <option>-SELECT-</option>
  </select>
</div>  <span id="loader"></span>
          </td>
        </tr>

        <tr>
          <td align="right">Prog Language :</td>
          <td>
  <select name="lang[]" multiple="true" style="height:100px;">
    <option value="c" selected>C</option>
    <option value="cpp">C++</option>
    <option value="php" selected>PHP</option>
    <option value="chash">C#</option>
    <option value="dotnet">.NET</option>
    <option value="python" selected>PYTHON</option>
  </select>
          </td>
        </tr>

        <tr>
          <td align="right">Hobbies :</td>
          <td>
            <div  style="width:450px;">
            <div style="float:left;">
              <div class="styleHobbies"><label class="radio "><input checked type="checkbox" value="cricket" name="hobbies[]"/>Cricket</label></div>
              <div class="styleHobbies"><label class="radio "><input type="checkbox"  value="hockey" name="hobbies[]"/>Hockey</label></div>
              <div checked class="styleHobbies"><label class="radio "><input type="checkbox"  value="football" name="hobbies[]"/>Football</label></div>
            </div>

            <div style="float:left;">
              <div class="styleHobbies"><label class="radio "><input type="checkbox"  value="tennis" name="hobbies[]"/>Tennis</label></div>
              <div class="styleHobbies"><label class="radio "><input checked type="checkbox"  value="carrom" name="hobbies[]"/>Carrom</label></div>
              <div class="styleHobbies"><label class="radio "><input type="checkbox"  value="bollyball" name="hobbies[]"/>Bollyball</label></div>
            </div>

            <div  style="float:left;">
              <div class="styleHobbies"><label class="radio "><input checked type="checkbox"  value="tabletennis" name="hobbies[]"/>TableTennis</label></div>
              <div class="styleHobbies"><label class="radio "><input type="checkbox"  value="others" name="hobbies[]"/>Others</label></div>
            </div>
            </div>
          </td>
        </tr>

        <tr>
          <td align="right">Image :</td>
          <td><input type="file" name="image"/></td>
        </tr>

        <tr>
          <td align="right">Secure Image :</td>
          <td>
<!-- Captcha Start -->
<img src="captcha/captcha.php" id="captcha" /><br/>
<a href="javascript:void(0)" onclick="    document.getElementById('captcha').src='captcha/captcha.php?'+Math.random();
    document.getElementById('captcha-form').focus();"
    id="change-image">Not readable? Change text.</a><br/><br/>
<input type="text" name="captcha" id="captcha-form" /><br/>
<!-- Captcha End-->



          </td>
        </tr>



        <tr>
          <td align="right"><input type="reset"/></td>
          <td><input type="submit" class="sbmt"/></td>
        </tr>

      </thead>

    </table>

 </form>

<script type="text/javascript">
  $(function(){
 /* for validation we didn't inplementd that...if you want to check then give id "captchaId" to captcha field*/
      var URL = 'ajax_response/countries.php';
      $.ajax({
        url:URL,
        data:{},
        dataType:'json',
        type:'POST',
        beforeSend:function(){ $('#loader').html('<img src="img/loader.gif" />');},

        success:function(data){
          var selectCountries = '<select name="country">';
          selectCountries += '<option value="">-SELECT-</option>';
          $.each(data, function(key,value) {
 selectCountries += '<option value="'+key+'">'+value+'</option>';
          //alert(key);
          //alert(value);

          });
         selectCountries += '</select>';
         $('#countryDiv').html(selectCountries);
         //alert(selectCountries);
        },
        complete:function(){
         $('#loader').html('');
        },
        error: function(xhr,status,error) { alert('Error: ' + status) ; }
      });

  });
</script>
